<template>
  <div class="user-info">
    <div class="title">基本资料</div>
    <Button type="default" class="cancle-button" :disabled="!ischange" name="button" @click="cancelChange()">取消</Button>
    <Button type="primary" class="change-button" name="button" @click="saveChange">{{saveWord}}</Button>
    <div class="box-info">
      <div class="base">
        <div class="base-form form-type">
          <h5>个人信息</h5>
          <Form :model="userInfo" :label-width="80">
            <FormItem label="姓名: ">
              <span class="no-change">{{userInfo.realname}}</span>
            </FormItem>
            <FormItem label="性别: ">
              <span class="no-change">{{userInfo.sex}}</span>
            </FormItem>
            <FormItem label="年龄: ">
              <span class="no-change">{{userInfo.age}}</span>
            </FormItem>
            <FormItem label="出生日期: ">
              <span class="no-change">{{userInfo.birthday}}</span>
            </FormItem>
          </Form>
        </div>
        <div class="form-type">
          <h5>工作状态</h5>
          <Form class="work-info" :model="userInfo" :label-width="80">
            <FormItem label="入职时间:">
              <DatePicker v-if="ischange" :value="userInfo.entrytime" @on-change="setEntryTime" :options="entryOption" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"></DatePicker>
              <span v-else class="no-change">{{userInfo.entrytime}}</span>
            </FormItem>
            <FormItem label="在职状态:">
              <Select v-if="ischange" v-model="userInfo.status">
                <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <span v-else class="no-change">{{userInfo.status?'在职':'离职'}}</span>
            </FormItem>
            <FormItem label="微信:">
              <Input v-if="ischange" v-model="userInfo.wechat" :maxlength="15" placeholder="最多输入15个字符"></Input>
              <span v-else class="no-change">{{userInfo.wechat}}</span>
            </FormItem>
            <FormItem label="工作内容:">
              <Input v-if="ischange" v-model="userInfo.content" type="textarea" :maxlength="150" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入工作内容,最多输入150个字符"></Input>
              <span v-else class="no-change">{{userInfo.content}}</span>
            </FormItem>
          </Form>
        </div>
      </div>
      <div class="info">
        <div class="form-type">
          <h5>联系方式</h5>
          <Form class="concat" :model="userInfo" :label-width="80">
            <FormItem label="电话:">
              <span class="no-change">{{userInfo.telephone}}</span>
            </FormItem>
            <FormItem label="邮箱:">
              <span class="no-change">{{userInfo.email}}</span>
            </FormItem>
            <FormItem label="所在组:">
              <span class="no-change">{{userInfo.org}}</span>
            </FormItem>
            <FormItem label="毕业院校:">
              <span class="no-change">{{userInfo.school}}</span>
            </FormItem>
          </Form>
        </div>
        <div class="form-type">
          <h5>生活娱乐</h5>
          <Form class="life-info" :model="userInfo" :label-width="80">
            <FormItem label="签名:">
              <Input v-if="ischange" v-model="userInfo.sign" type="textarea" :maxlength="35" :autosize="{minRows: 1,maxRows: 2}" placeholder="最多输入35个字符"></Input>
              <span v-else class="no-change">{{userInfo.sign}}</span>
            </FormItem>
            <FormItem label="生活主页:">
              <Input v-if="ischange" v-model="userInfo.home" type="textarea" :maxlength="80" :autosize="{minRows: 2,maxRows: 5}" placeholder="最多输入80个字符"></Input>
              <span v-else class="no-change">{{userInfo.home}}</span>
            </FormItem>
            <FormItem label="技术分享:">
              <Input v-if="ischange" v-model="userInfo.share" type="textarea" :maxlength="80" :autosize="{minRows: 2,maxRows: 5}" placeholder="最多输入80个字符"></Input>
              <span v-else class="no-change">{{userInfo.share}}</span>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      stateList: [
        {
          value: 1,
          label: '在职'
        },
        {
          value: 2,
          label: '请假'
        },
        {
          value: 0,
          label: '离职'
        }
      ],
      entryOption: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      saveWord: '修改',
      ischange: false,
      userInfo:{},
      info: {}
    }
  },
  computed: {
    ...mapState({
      userID: ({user}) => user.userID
    })
  },
  created() {
    this.getInfo()
  },
  methods: {
    ...mapMutations(['GET_USERINFO']),
    ...mapActions(['getUserInfo']),
    saveChange() {
      this.saveWord = this.ischange ? '修改' : '保存'
      this.ischange = !this.ischange
      this.info = this.$lodash.clone(this.userInfo)
      if(this.ischange) return
      const param = {
        wechat: this.userInfo.wechat,
        entrytime: this.userInfo.entrytime,
        status: this.userInfo.status,
        content: this.userInfo.content,
        sign: this.userInfo.sign,
        home: this.userInfo.home,
        share: this.userInfo.share
      }
      this.getUserInfo({type: 'put', id: this.userID, param: param}).then((suc) => {
        this.GET_USERINFO({
          ...this.userInfo,
          ...param
        })
      }).catch((err) => {
        console.log(err)
        this.$Notice.error({title: '失败', desc: '修改失败!'})
      })
    },
    cancelChange() {
      if(this.ischange) {
        this.userInfo = this.info
        this.ischange = !this.ischange
        this.saveWord = "修改"
      }
    },
    getInfo() {
      this.getUserInfo({type: 'get', id: this.userID}).then((suc) => {
        if(suc && suc.data){
          this.userInfo = this.$lodash.clone(suc.data)
          this.GET_USERINFO(suc.data)
        }
      }).catch((err) => {
        console.log(err)
        this.$Notice.error({title:'失败', desc: '获取失败!'})
      })
    },
    setEntryTime(data) {
      this.userInfo.entrytime = data
    }
  }
}
</script>

<style lang="less" scoped>
.user-info {
  width: 100%;
  height: ~'calc(100% - 24px)';
  .title {
    font-weight: 500;
    height: 60px;
    line-height: 40px;
    font-size: 20px;
    padding: 20px 0 0 20px;
    border-bottom: 1px solid #ccc
  }
}

.box-info {
  width: 100%;
  height: ~'calc(100% - 130px)';
  display: flex;
  padding: 40px 100px;
}

.base {
  width: 40%;
  margin-left: 50px;
  .photo {
    margin: 0 80px 40px;
    text-align: center;
    width: 240px;
    height: 240px;
    background-color: #aaa;
    img {
      width: 100%;
      height: 100%
    }
  }
  .button {
    margin-left: 170px
  }
  .work-info {
    width: 80%;
    margin-bottom: 60px;
  }
  
  .base-form {
    width: 80%;
    &.form-type {
      margin-bottom: 60px;
    }
  }
}

.info {
  width: 40%;
  margin-left: 20px;
  min-width: 340px;
  .concat {
    width: 80%;
  }
  .form-type {
    margin-bottom: 60px;
  }
}


.form-type {
  h5 {
    font-weight: 700;
    font-size: 16px;
    padding: 0 0 25px 20px;
  }
}

.cancle-button,
.change-button {
  float: right;
  margin: 30px 15px 20px
}

.cancle-button {
  margin-right: 70px
}

.no-change {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 21px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #dddee1;
  border-radius: 4px;
  color: #495060;
  background-image: none;
  position: relative;
  cursor: text;
  overflow:hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
</style>
